<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html lang="cn" class="app">
<head>
    <meta charset="utf-8" />
    <title>${dict:getConfigValueByKey('WEB_NAME','管理平台')} | 角色管理</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/app.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/js/ztree/css/zTreeStyle.css">
    <link rel="stylesheet" href="${ctxStatic}/js/chosen/chosen.css" type="text/css" />
    <%--<link rel="stylesheet" href="${ctxStatic}/js/page/paging.css" type="text/css" />--%>
    <!--[if lt IE 9]>
    <script src="${ctxStatic}/js/ie/html5shiv.js"></script>
    <script src="${ctxStatic}/js/ie/respond.min.js"></script>
    <script src="${ctxStatic}/js/ie/excanvas.js"></script>
    <![endif]-->
    <style>.line{height:auto;}</style><%--这个不能删除--%>
    <style>
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #ddd;
            background: #fff;
            width: 280px;
            height: 200px;
            overflow-y: auto;
            overflow-x: auto;
        }
        .theme-black ul.ztree{background:transparent;border:1px solid rgba(255, 255, 255, 0.2);}
        .tpl-content-wrapper{margin-left:0}
    </style>
</head>
<body>
<section class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-12">
            <!-- 引导开始 -->
            <ul class="breadcrumb">
                <li><a href="${ctx}/welcome"><i class="fa fa-home"></i> 主页</a></li>
                <li>系统设置</li>
                <li class="active">角色管理</li>
                <li class="active">角色编辑</li>
            </ul>
            <!-- 引导结束 -->
        </div>
    </div>
    <form id="roleForm" class="bs-example form-horizontal" method="post">
        <%--基本信息--%>
        <section class="panel panel-default">
            <header class="panel-heading font-bold">角色新增</header>
            <input type="hidden" name="id" value="${role.id}" />
            <div class="panel-body">
                <div class="col-lg-2 col-md-4 col-sm-4">
                    <label class="col-lg-12 col-md-12 col-sm-12"><span class="text-danger">*</span>角色授权：</label>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <input type="hidden" id="resourceIds" name="resourceIds" value='<c:forEach items="${role.resourceIds}" var="item" varStatus="status">${item}<c:if test="${!status.last}">,</c:if></c:forEach>' />
                        <ul id="treeResource" class="ztree" style="margin-top:0; width:200px;height: auto;height:350px;overflow-y: auto;"></ul>
                    </div>
                </div>
                <div class="col-lg-10 col-md-8 col-sm-8">
                    <%--<div class="form-group">--%>
                        <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>单位：</label>--%>
                        <%--<div class="col-lg-6 col-md-6 col-sm-6 ">--%>
                            <%--<input type="text" id="parentName" class="form-control" minlength="1" placeholder="归属单位（必选）" value="${role.orgNm}" required readonly/>--%>
                            <%--<input type="hidden" id="orgId" name="orgId" value="${role.orgId}" required/>--%>
                        <%--</div>--%>
                        <%--<div class="col-lg-4 col-md-4 col-sm-4 ">--%>
                            <%--<button class="btn btn-default" id="menuBtn" type="button">选择</button>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <div class="form-group">
                        <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>名称：</label>
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <input type="text" name="name" id="name" class="form-control" value="${role.name}" minlength="1" placeholder="角色名称（必填）" required />
                        </div>

                        <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>标识：</label>
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <input type="text" name="role" id="role" class="form-control" value="${role.role}" minlength="1" placeholder="角色标识（必填）" required />
                        </div>
                    </div>
                    <%--<div class="form-group" style="display: none;">--%>
                        <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label">数据范围：</label>--%>
                        <%--<div class="col-lg-10 col-md-10 col-sm-10">--%>
                            <%--<select name="type" data="${role.dataScope}" class="form-control" >--%>
                                <%--<c:forEach items="${dataScope}" var="m">--%>
                                    <%--<option value="${m}">${m.info}</option>--%>
                                <%--</c:forEach>--%>
                            <%--</select>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <div class="form-group">

                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>站点：</label>
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <input type="text" name="siteUrl" id="siteUrl" value="${role.siteUrl}<c:if test="${empty role.siteUrl}">admin</c:if>" class="form-control" minlength="1" placeholder="站点路径（必填）" required readonly />
                        </div>
                        <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>主页：</label>
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <select name="indexUrl" id="indexUrl" class="chosen-select form-control" placeholder="">
                                <option value="userCenter" <c:if test="${role.indexUrl == 'userCenter'}">selected</c:if> >userCenter</option>
                                <option value="welcome" <c:if test="${role.indexUrl == 'welcome'}">selected</c:if> >welcome</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 col-md-2 col-sm-2 control-label">可用：</label>
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <select name="available" class="form-control"  data="${role.available}">
                                <c:forEach items="${yn}" var="m">
                                    <option value="${m.value}" <c:if test="${role.available==m.value}">selected="selected"</c:if>>${m.label}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>排序：</label>
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <input type="number" id="sort" name="sort" class="form-control" value="${role.sort}<c:if test="${empty role.sort}">0</c:if>" minlength="1" placeholder="排序（默认为0）" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 col-md-2 col-sm-2 control-label">备注：</label>
                        <div class="col-lg-10 col-md-10 col-sm-10">
                            <textarea name="remarks" class="form-control" >${role.remarks}</textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-10 col-md-10 col-sm-10">
                            <shiro:hasPermission name="sys:role:edit">
                                <button type="button" onclick="updateRole()" class="btn btn-s-md btn-info">保存</button>
                            </shiro:hasPermission>
                            <button type="button" class="btn btn-s-md btn-danger" onclick="closeSelfModel()">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </form>
</section>
<div style="height:100px;"></div>
<div id="menuContent" class="menuContent" style="display:none;position: absolute;z-index: 10000;background-color: #eee;border: 1px solid #ccc;">
    <ul id="tree" class="ztree" style="margin-top:0;"></ul>
</div>
</body>
<script src="${ctxStatic}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctxStatic}/js/bootstrap.js"></script>
<!-- App -->
<script type="text/javascript" src="${ctxStatic}/js/tools.js?version=${ctxVersion}"></script>
<script type="text/javascript" src="${ctxStatic}/js/page/paging.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tmpl/jquery.tmpl.js"></script>
<script src="${ctxStatic}/js/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="${ctxStatic}/js/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/chosen/chosen.jquery.min.js"></script>
<script>
    $(function(){
        var setting1 = {
            check: {
                enable: true ,
                chkboxType: { "Y": "ps", "N": "ps" }//父子关联关系
            },
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck
            }
        };
        //初始化ztree单位
        $.fn.ztreeOrg=function(tree,zNodes){
            $.fn.zTree.init(tree, setting1, zNodes);
        }
        //点击事件
        function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj(treeId),
                nodes = zTree.getCheckedNodes(true),
                id = "";
            nodes.sort(function compare(a,b){return a.id-b.id;});
            for (var i=0, l=nodes.length; i<l; i++) {
                id += nodes[i].id + ",";
            }
            if (id.length > 0 ) id = id.substring(0, id.length-1);
            //点击回调方法
            ztreeOrgOnClickCall && ztreeOrgOnClickCall(id);
        }
    })

</script>
<script>
    $(function(){
        var setting2 = {
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        //初始化ztree选择
        $.fn.ztreeSelect=function(tree,zNodes){
            var ztree = $.fn.zTree.init(tree, setting2, zNodes);
            ztree.expandAll(true);//默认展开
        }

        //点击事件
        function onClick(e, treeId, treeNode) {
            //点击回调方法
            ztreeOnClickCall && ztreeOnClickCall(treeNode);
            $("#parentName").val(treeNode.name);
            hideMenu();
        }

        function showMenu() {
            var cityObj = $("#parentName");
            var cityOffset = $("#parentName").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px",
                top: cityOffset.top + cityObj.outerHeight() + "px"
            }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }
        $("#menuBtn").click(showMenu);
    })
</script>
<script>
    $(function(){
        var msg = '${msg}';
        if(msg!=''){
            showMsg(msg);
        }

        <%--var msg = '${msg}';--%>
        <%--if(msg!=''){--%>
            <%--showMsg(msg);--%>
            <%--closeModel(true);//关闭窗口--%>
        <%--}--%>
        //单位树选择
        <%--var zNodes =[<c:forEach items="${organizationList}" var="o" varStatus="status">{ id:${o.id}, pId:${o.parentId}, name:'${o.name}', open:${o.rootNode}}<c:if test="${!status.last}">,</c:if></c:forEach>];--%>
        <%--$.fn.ztreeSelect($("#tree"),zNodes);--%>

        //权限树选择
        var resourceZNodes =[<c:forEach items="${resourceList}" var="r" varStatus="status"><c:if test="${not r.rootNode}">{ id:"${r.id}", pId:"${r.parentId}", name:"${r.name}", checked:${fnc:in(role.resourceIds, r.id)},open:true}<c:if test="${!status.last}">,</c:if></c:if></c:forEach>];
        $.fn.ztreeOrg($("#treeResource"),resourceZNodes);
    })
//    //ztree资源点击回调
//    function ztreeOnClickCall(treeNode){
//        $("#orgId").val(treeNode.id);
//    }
    //ztree单位点击回调
    function ztreeOrgOnClickCall(id){
        $("#resourceIds").val(id);
    }
    /**保存角色信息*/
    function updateRole(){
        if(isBlankCheck("name,role,siteUrl,indexUrl,sort","名称,标识,站点,主页,排序")){
            var loadingLayer = layer.load(1, {shade: [0.1,'#fff']});//loading
            $.ajax({
                type: 'post',
                url: '${ctx}/role/update.json?timeStamp='+new Date().getTime(),
                dataType:"json",
                data: $("#roleForm").serialize(),
                success: function (data) {
                    layer.close(loadingLayer);
                    showMsg(data.desc);
                },error:function(){
                    layer.close(loadingLayer);
                    showMsg("点击过快或程序异常");
                }
            });
        }
    }
    /** 关闭当前弹出框并执行 */
    function closeSelfModel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.searchPage(1);//执行父页面的搜索功能
        parent.layer.close(index);
    }
</script>

</html>
